<template>
    <div class="login-box">
        <div class="content">
        <div class="left"></div>
        <div class="right">
            <!-- <text-login/> -->
            <component :is="changeCom"></component>
            <!-- <span class="qr-code"> -->

            <!-- </span> -->
        </div>
    </div>
    </div>
</template>

<script>
import TextLogin from './textLogin.vue'
import QrLogin from './qrLogin.vue'
export default {
    components:{TextLogin,QrLogin},
    data(){
        return {
            changeComponent: true
        }
    },
    computed: {
        changeCom(){
            return this.changeComponent ? TextLogin : QrLogin
        }
    }
}
</script>
<style lang="less" scoped>
@import '@/style/common.less';
.login-box {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(130deg, #734DF4, #4c61f4);
    .content {
        display: block;
        position: relative;
        top: calc(50% - 10rem);
        left: calc(50% - 20rem);
        width: 40rem;
        height: 20rem;
        background-color: #fff;
        box-shadow: 5px -5px 30px 5px rgba(0, 0, 0, .3);
        > .left {
            float: left;
            width: 15rem;
            height: 100%;
            background: url('@/images/loginBG.jpg') center center / 100% 100% no-repeat;
        }
        > .right {
            position: relative;
            float: left;
            display: inline-block;
            width: 25rem;
            height: 100%;
        }
        &:after {
            content: '';
            height: 0;
            width: 0;
            display: block;
            clear: both;
        }
    }
}
</style>